<template>
  <div class="model-box">
    <div id="container"></div>
    <Menu/>
    <router-view/>
  </div>
</template>

<script setup>
import {onMounted,} from "vue"
import {useRouter} from "vue-router"
import Menu from "@/components/Home/Menu.vue"
const router = useRouter()
onMounted(()=>{
  initCesium()
  router.push('/layer')
})

const initCesium = () => {
  Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmZmU4ODg5MS1mYTYxLTQ1MTMtOTM1My03YzhhMTM3ZWUxNDAiLCJpZCI6MTIyNTgyLCJpYXQiOjE2NzQ5NjQ0ODR9.e9Q99Z21wt6NjtUEtGHIjYoNq8WGHsisnoysbVptffE"
  window.terrainProvider = Cesium.createWorldTerrain()  // 在线地形
  window.viewer = new Cesium.Viewer('container', {
    // 关闭原生控件
    geocoder:false, // 搜索功能
    homeButton:false, // 视角恢复功能
    sceneModePicker:false, // 2d、3d切换功能
    baseLayerPicker:false, // 地图底色选择功能
    navigationHelpButton:false, // 帮助功能
    animation:false, // 动画功能
    timeline:false, // 时间线功能
    fullscreenButton:false, // 全屏功能
    // 在线地形
    terrainProvider: Cesium.createWorldTerrain(),
  })
  window.viewer.shadows = false//是否显示阴影

}
</script>

<style scoped lang="less">
#container{
  height: 89vh;
  width: 55vw;
  position: absolute;
  top: 10vh;
  left: 22%;
  border: 1px solid white;
  box-shadow: 0 2px 20px white;
}
</style>